/* eslint no-unused-vars:0 */
import React from 'react';
import 'antd/dist/antd.css';
import './index.less';
import { Card } from 'antd';

import { Link } from 'react-router-dom';
// import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/radar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
// import {ChartCard} from '../../components/Charts';

const gridStyle = {
    width: '48%',
    height: '80%',
    borderRadius: '4px',
    margin: '1%',
    textAlign: 'center'
};

export default class Customize extends React.Component {
    componentDidMount() {
        var myChart = echarts.init(document.getElementById('chart1'));

        myChart.setOption({
            title: {
                text: '生源情况舆情分数历史趋势'
            },
            calculable: true,
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: [
                {
                    typr: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            series: [
                {
                    type: 'line',
                    data: [90, 60, 90, 30, 90, 60, 30],
                    markLine: {
                        data: [
                            {
                                type: 'average',
                                name: '平均值'
                            }
                        ]
                    }
                }
            ]
        });

        var myChart2 = echarts.init(document.getElementById('chart2'));
        myChart2.setOption({
            title: {
                text: '生源情况历史趋势'
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: [
                        '周一',
                        '周二',
                        '周三',
                        '周四',
                        '周五',
                        '周六',
                        '周日'
                    ]
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        normal: {
                            areaStyle: {
                                type: 'default'
                            }
                        }
                    },
                    data: [60, 90, 30, 60, 60, 90, 30],
                    markPoint: {
                        symbol: 'pin',
                        data: [60, 90, 30, 60, 60, 90, 30]
                    }
                }
            ]
        });
    }

    render() {
        return (
            <div className="body">
                <div
                    style={{
                        marginTop: '20px'
                    }}>
                    <span className="Customize-body">问卷报告</span>
                </div>
                {/*{this.props.children}*/}
                {/*<div id="main" style={{width:400, height:400 }} ></div>*/}
                <Card.Grid style={gridStyle} title="test" id="chart1" />
                <Card.Grid style={gridStyle} id="chart2" />
                <Card.Grid style={gridStyle} id="chart3" />

                <Card.Grid style={gridStyle}>Content</Card.Grid>
                <Card.Grid style={gridStyle}>Content</Card.Grid>
            </div>
        );
    }
}
